<template>
  <div class="playlist">
    <ul class="playlist-cat">
      <li v-for="item in playList" :key="item.id">
        <router-link :to="{name:'Songsheet',query:{id:item.id}}">
        <div class="imgr">
          <div class="img-top">
            <img :src="item.coverImgUrl" alt="" />
            <div class="icon"><i class="el-icon-headset"></i></div>
          </div>
          <div class="img-footer">
            <p>{{item.name}}</p>
            <div class="tag">
              <span v-for="(tag,idx) in item.tags" :key="idx">#{{tag}}</span>
            </div>
          </div>
        </div>
         </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
    props:{
        playList:{
            type:Array,
            default:function(){
                return []
            }
        }
    },
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
.playlist {
  .playlist-cat {
    width: 1100px;
    margin: 0 auto;
    display: flex;
    // flex-wrap: wrap;
    justify-content: space-between;
    li {
        width: 300px;
      .imgr {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        // border: 1px solid red;
        .img-top {
          position: relative;
          width: 209px;
          height: 216px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            border-radius: 4px;
            cursor: pointer;
            transition: transform 1s;
            //  transition:border 1s;
          }
         img:hover{
             transform: scale(1.2);
          }
          .icon {
            width: 60px;
            height: 20px;
           background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 97%, rgba(0, 0, 0, 0.5) 100%);
            position: absolute;
            right: -8px;
            top:0;
            color: #fff;
            text-align: center;
          }
        }
        .img-footer {
          p {
              width: 220px;
            padding: 10px;
          }
          span {
            padding: 6px;
            color: red;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
